<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>Title</title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/util.js"></script>
    <style>
        table,th{
            border: 1px solid #ddd;
            text-align: center;
        }

        table{
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }

    </style>
    <script>
        let arrObj = [];
        for (let i = 0; i < 100; i++) {
            let student = {
                id: i + 1,
                name: getRandomCode(),
                gender: Math.floor(Math.random() * 10) % 2 ? "男" : "女",
                age: Math.floor(Math.random() * (25 - 18 + 1)) + 18,
                tel: getRandomTel(),
                qq: getRandomQQ(),
                major: getRandomMajor(),
                score:Math.floor(Math.random() * (100 - 1 + 1)) + 1,
            };
            arrObj.push(student)
        }

            onload=()=>{
                let table = document.createElement("table");
                //第一行
                let tr = document.createElement("tr");
                let th = document.createElement("th");
                th.innerHTML = "id";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "name";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "gender";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "age";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "tel";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "qq";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "major";
                tr.appendChild(th);

                th = document.createElement("th");
                th.innerHTML = "score";
                tr.appendChild(th);

                table.appendChild(tr);
                for(let i =0;i<arrObj.length;i++){
                    tr = document.createElement("tr");
                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].id;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].name;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].gender;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].age;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].tel;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].qq;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].major;
                    tr.appendChild(th);

                    th = document.createElement("th");
                    th.innerHTML = arrObj[i].score;
                    tr.appendChild(th);

                    table.appendChild(tr)
                }
                document.body.appendChild(table)
        }
    </script>
</head>
<body>

</body>
</html>